<template>
	
	<view :class="['container','vh100',{'dark':theme == 'dark'}]">

		<!-- 设置商家微信 -->
		<view :class="['drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<navigator @click="funsItemClick(3)" class="ptb20 ft14 flex alcenter between plr10">
				<span>{{$t('bico.W245')}}</span>
				<span class="flex alcenter">{{$t('bico.W246')}}<image src="../../static/image/mores.png" class="wt15 h15 ml10"></image>
				</span>
			</navigator>
		</view>

		<!-- 设置商家银行卡 -->
		<view :class="['drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<navigator @click="funsItemClick(4)" class="ptb20 ft14 flex alcenter between plr10">
				<span>{{$t('bico.W247')}}</span>
				<span class="flex alcenter">{{$t('bico.W248')}}<image src="../../static/image/mores.png" class="wt15 h15 ml10"></image>
				</span>
			</navigator>
		</view>

		<!-- 设置商家支付宝 -->
		<view :class="['drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<navigator @click="funsItemClick(5)" class="ptb20 ft14 flex alcenter between plr10">
				<span>{{$t('bico.W249')}}</span>
				<span class="flex alcenter">{{$t('bico.W250')}}<image src="../../static/image/mores.png" class="wt15 h15 ml10"></image>
				</span>
			</navigator>
		</view>
		
		<!-- 设置商家swift -->
		<view :class="['drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<navigator @click="funsItemClick(11)" class="ptb20 ft14 flex alcenter between plr10">
				<span>{{$t('bico.swift')}}</span>
				<span class="flex alcenter">{{$t('bico.W250')}}<image src="../../static/image/mores.png" class="wt15 h15 ml10"></image>
				</span>
			</navigator>
		</view>
		
		<!-- 设置商家贝宝 -->
		<view :class="['drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<navigator @click="funsItemClick(12)" class="ptb20 ft14 flex alcenter between plr10">
				<span>{{$t('bico.paypal')}}</span>
				<span class="flex alcenter">{{$t('bico.W250')}}<image src="../../static/image/mores.png" class="wt15 h15 ml10"></image>
				</span>
			</navigator>
		</view>
		
		<!-- 设置商家西联汇款 -->
		<view :class="['drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<navigator @click="funsItemClick(13)" class="ptb20 ft14 flex alcenter between plr10">
				<span>{{$t('bico.west')}}</span>
				<span class="flex alcenter">{{$t('bico.W250')}}<image src="../../static/image/mores.png" class="wt15 h15 ml10"></image>
				</span>
			</navigator>
		</view>
		
		<!-- 绑定成功之后的样式 -->
		
        <view :class="['yhk','drlng','me-card','funs',{'darksss':theme=='dark'}]">
			<view v-for="(item, index) in arr" :key="index">
				<u-row gutter="20">
					<u-col span="2">
						<view class="yhk2">
							<span><image :src="item.image" style="width: 6vw;height: 6vw;margin: 2vw;" /></span>
						</view>
					</u-col>
					<u-col span="8">
						<view class="yhk2">
							<span>{{item.txt}}</span><span>{{item.idcard}}</span>
						</view>
					</u-col>
					<u-col span="2">
						<view class="yhk2 yhk3">
							<span><a href="javascript:void(0)" @click="del(item.paymentId)"> {{$t('bico.W251')}}</a></span>
						</view>
					</u-col>
				</u-row>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import {
		myMixins
	} from '@/common/myMixins.js'
	import {
		cnyPayList,

		cnyPayDel,
	} from '../../common/apiString.js'
	export default {
		mixins: [myMixins],
		data() {
			return {
				head: '../../static/rvm.png',
				myOtc: {},
				arr: []
			}
		},
		computed: {
			...mapState({
				theme: state => state.theme
			}),
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('bico.W256'),
			})
			this.$utils.setTheme(this.theme);
			this.myOtc = uni.getStorageSync('myOtc');
			
		},
		onShow(){
			this.getList()
		},
		methods: {
			del(id) {
				var that = this
				that.$utils.initDataToken({
					url: cnyPayDel,
					data: {
						paymentId: id
					},
					type: 'post'
				}, (res, msg) => {
					that.getList()
					that.$utils.showLayer(this.$t('bico.W252'),)
				})
			},
			//路由开始
			getList() {
				var that = this
				that.$utils.initDataToken({
					url: cnyPayList,
					data: {
						size: 100
					},
					type: 'post'
				}, (res, msg) => {
					that.arr=[]
					var arr = res.records;
					if (arr.length > 0) {
						arr.forEach(element => {
							if (element.type == 'ALI_PAY') {
								element.image = require('@/static/business/payway/zfb.png');
								element.txt = this.$t('bico.W253');
							} else if (element.type == 'WE_CHAT') {
								element.image = require('@/static/business/payway/wx.png');
								element.txt = this.$t('bico.W254');
							} else if (element.type == 'BANK') {
								element.image = require('@/static/business/payway/bank.png');
								element.txt = this.$t('bico.W255');
							} else if (element.type == 'SWIFT') {
								element.image = require('@/static/business/payway/swift.png');
								element.txt = this.$t('bico.swift');
							} else if (element.type == 'WEST') {
								element.image = require('@/static/business/payway/west.png');
								element.txt = this.$t('bico.west');
							} else if (element.type == 'PAYPAL') {
								element.image = require('@/static/business/payway/paypal.png');
								element.txt = this.$t('bico.paypal');
							}
							that.arr.push(element);
						});
					}
				})
			},
			funsItemClick(index) {
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/business/business' //法币商家
					})
				};
				if (index == 2) {
					uni.navigateTo({
						url: '/pages/business/SetNickname' //设置昵称
					})
				};
				if (index == 3) {
					uni.navigateTo({
						url: '/pages/business/Merchantwechat' //商家微信
					})
				};
				if (index == 4) {
					uni.navigateTo({
						url: '/pages/business/bankcard' //商家银行卡
					})
				};
				if (index == 5) {
					uni.navigateTo({
						url: '/pages/business/MerchantAlipay' //商家支付宝
					})
				};
				if (index == 6) {
					uni.navigateTo({
						url: '/pages/mine/userCenter' //身份认证
					})
				};

				if (index == 7) {
					uni.navigateTo({
						url: '/pages/business/passport' //护照认证
					})
				};

				if (index == 8) {
					uni.navigateTo({
						url: '/pages/mine/resetLegalPwd' //修改资金密码
					})
				};

				if (index == 9) {
					uni.navigateTo({
						url: '/pages/business/contactinformation' //联系方式
					})
				};

				if (index == 10) {
					uni.navigateTo({
						url: '/pages/business/contactinformation' //联系方式
					})
				};
				if (index == 11) {
					uni.navigateTo({
						url: '/pages/business/Merchantswift' //联系方式
					})
				};
				if (index == 12) {
					uni.navigateTo({
						url: '/pages/business/Merchantpaypal' //联系方式
					})
				};
				if (index == 13) {
					uni.navigateTo({
						url: '/pages/business/Merchantwest' //联系方式
					})
				};

			},
			//路由结束
		},
	}
</script>

<style lang="scss">
	img {
		vertical-align: middle;
	}

	page {
		background: #f7f7f7;
	}
.container {
	width: 100%;
	height: 100%;
		
	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.avatar {

		background: #ffffff0a;
		border-radius: 50%;
		width: 16vw;
		height: 16vw;
		overflow: hidden;
		border: 1vw solid #ffffff14;
		position: relative;
		display: inline-block;
		vertical-align: top;
		text-align: center;
	}



		.flex_image {
			width: 6vw;
			height: 6vw;
			border-radius: 50%;
			position: relative;
			top: 0.4vw;
		}
		
		.yhk2 {
		    /* width: 160px; */
		    height: 40px;
		    line-height: 40px;
		    /* text-align: center; */
		    font-size: 14px;
		    font-weight: 400;
		    color: #141625;
		    border-radius: 4px;
		    /* position: absolute; */
		    /* top: 0px; */
		    /* right: 0; */
		    /* left: 67vw; */
		}
		
		.yhk3 {
		        font-size: 14px;
		        font-weight: 400;
		        color: #141625;
		        border-radius: 4px;
		        position: absolute;
		        top: 0px;
		        right: 23px;
		}		

		.mt10 {
			margin-top: 17px;
		}

		.me-card {
			width: 96%;
			padding: 0vw 0vw 0;
			background-color: #fff;
			border-radius: 4px;
			margin-top: 10px;
			position: relative;
			top: 2vw;
			left: 2vw;
		}

		.plr10 {
			padding-left: 10px;
			padding-right: 0px;
		}

		.userinfo-card {
			.card-box {
				width: 100%;
				height: 120px;
				position: relative;
				z-index: 0;

				.user-section {
					position: absolute;
					top: 0;
					z-index: 10;
					width: 100%;
					padding: 50upx 30upx 210upx;
					display: flex;

					.avatar-wrap {
						width: 100upx;
						height: 100upx;
						border-radius: 50%;
						overflow: hidden;
						position: relative;
						top: 1.2vw;

						.avatar {
							width: 100%;
							height: 100%;
						}
					}

					.portrait-box {
						margin-left: 18upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.info-box {
							font-size: 38upx;

							font-weight: bold;
							color: #333;
						}

						.tuan {
							display: flex;
							align-items: center;

							.ma {
								font-size: 3.6vw;

								font-weight: 600;

							}

							.fuzi {
								width: 64upx;
								height: 34upx;
								background: #CCCCCC;
								border-radius: 15upx;
								font-size: 20upx;

								font-weight: 500;

								text-align: center;
								line-height: 34upx;
								margin-left: 10upx;
							}
						}
					}
				}

				.balance-card-wrap {
					width: 100%;
					height: 200upx;
					padding: 0 20upx;
					position: absolute;
					bottom: 0;
					z-index: 10;

					.balance-card {
						width: 100%;
						height: 90px;
						background: linear-gradient(135deg, #3e38ec 30%, #3e38ec 80%);
						/* background-image: url(/static/img/businessbg.d8194963.png); */
						background-position: 0% 0%;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						border-radius: 10px;
						padding: 15px;

						.tit {

							font-weight: bold;
							color: #FFF;
							font-size: 4.2vw;
							position: absolute;
							top: 3vw;
							right: 10vw;
							left: 6vw;
						}

						.xia {
							width: 100%;
							display: flex;
							justify-content: space-between;

							.num {
								font-size: 70upx;

								font-weight: bold;
								color: #FFF;
							}

							.withdraw-btn {
								width: 75px;
								height: 30px;
								line-height: 30px;
								text-align: center;
								background: #243eccad;
								font-size: 12px;

								font-weight: 500;
								color: #FFF;
								border-radius: 2vw;
								position: relative;
								top: 0vw;
							}
						}
					}
				}
			}

		}
		

		.main {
			padding: 20upx;

			.income-card {
				width: 100%;
				background-color: #fff;
				border-radius: 20upx;
				padding: 30upx;
				margin-top: 20upx;

				.tit {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 3.6vw;
					line-height: 32upx;

					font-weight: bold;


					image {
						width: 10upx;
						height: 21upx;
					}
				}

				.show-content {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 40upx;

					.view-category {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.num {
							font-size: 3.6vw;

							font-weight: 600;
							position: relative;
							top: -1vw;

						}

						.funsItemImage {
							position: relative;
							top: -1vw;
							width: 6vw;
							height: 6vw;
							border-radius: 50%;
						}

						.text {
							font-size: 3vw;

							font-weight: 700;

						}
					}

					.line {
						width: 1px;
						height: 65upx;
						background-color: #5559691f;
					}
				}
			}



			.tool-card {
				background-color: #ffffff;
				width: 100%;
				padding: 0 30upx;
				margin-top: 20upx;
				border-radius: 20upx;

				.tool-item {
					display: flex;
					flex-direction: row;
					width: 100%;
					height: 100upx;
					align-items: center;
					justify-content: space-between;

					.view-image-left {
						width: 44upx;
					}

					.item-right {
						flex: 1;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;

						.view-text {
							margin-left: 0px;
							font-size: 3.4vw;

							font-weight: bold;

						}

						.view-image-right {
							width: 10upx;
							height: 21upx;
						}

						.funsItemImage {
							width: 6vw;
							height: 6vw;
							border-radius: 50%;
						}

					}
				}
			}
		}
}
</style>
